<template>
    <div>
        <div>{{ num }}</div>
        <div>{{ getNum() }}</div>
        <button @click="a++">点击a++</button>
        <div>{{ msg1 }}</div>
        <!-- 计算computed属性的数据双向绑定用完整写法 -->
        <!-- <input type="text" v-model="full">
        <div>{{text}}</div> -->
    </div>

</template>

<script>
export default {
	data() {
		return {
            text: '',
            msg: '123456',
            a: 10,
            b: 20,
        };
	},
    // 应用场景：一个变量的值，需要用另外的变量计算而来（动态取值）
    computed: {
        num () {
            return this.a + this.b;
        },
        msg1 () {
            return this.msg.split('').reverse().join('');
        }
    },
    // 计算属性的完整写法
    // computed: {
    //     full: {
    //         set (val) {
    //             this.text = val;
    //         },
    //         get () {
    //             return '默认值';
    //         }
    //     }
    // },
    methods: {
        getNum () {
            return this.a + this.b
        }
    },
};
</script>

<style scoped>
</style>